<template>
    <div id="AddCarousel" style="height: 847px;!important;">
        <el-container >

            <!--  页头 -->
            <el-header style="background-color: #F3F3F3">
                <span style="background-color: rgb(26, 188, 156)">&nbsp;</span> <span>添加轮播图</span>

                <div class="h-but">
                    <el-button @click="Refresh" size="small" ><i class="el-icon-refresh"></i> 刷新</el-button>
                    <el-button @click="back" size="small" ><i class="el-icon-arrow-left"></i> 返回</el-button>
                </div>
            </el-header>

            <el-main  style="background-color: #FFFFFF">
                <div style="text-indent: 5px;background-color: #F3F3F3;">
                    <i class="el-icon-circle-plus-outline"></i> 添加轮播图
                </div>
                <div style="margin-left: 500px" class="m-div">

                    <el-form ref="Carousel" :model="Carousel" label-width="102px" :rules="config">

                        <el-form-item prop="imgTitle" label="名称：">
                            <el-input style="width: 300px" v-model="Carousel.imgTitle"></el-input>
                        </el-form-item>
                        <br>

                        <span style="font-size: 12px;position: relative;top: -29px;left: 152px;color: #9FA7B4">名称只是作为辨别多个条目之用，并不显示在图片中</span>
                        <br>

                        <el-form-item style="position: relative;top: -37px;" prop="position" label="位置：">
                            <el-select v-model="Carousel.position">
                                <el-option label="APP首页轮播" value="1">APP首页轮播</el-option>
                                <el-option label="PC端首页轮播" value="2">PC端首页轮播</el-option>
                                <el-option label="PC端分类广告" value="3">PC端分类广告</el-option>
                            </el-select>
                        </el-form-item>
                        <br>

                        <el-form-item style="position: relative;top: -27px;" prop="startDate" label="开始时间：">
                            <el-col>
                                <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="Carousel.startDate" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <br>

                        <el-form-item style="position: relative;top: -37px;" prop="expireDate" label="到期时间：">
                            <el-col>
                                <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="Carousel.expireDate" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <br>

                        <el-form-item style="position: relative;top: -66px;" label="显示/不显示：">
                            <el-radio-group v-model="Carousel.display">
                                <el-radio :label="2">上线</el-radio>
                                <el-radio :label="3">下线</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <br>

                        <el-form-item style="position: relative;top: -66px;" label="图片上传：">
                            <el-upload
                                    ref="upload"
                                    :limit="1"
                                    :before-upload="beforeA"
                                    :auto-upload="false"
                                    action="http://39.106.26.150:8081/Carousel/addPicture"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>
                        <br>

                        <el-form-item style="position: relative;top: -56px;" label="内容备注：">
                            <el-input type="textarea" style="width: 154%" v-model="Carousel.remarks"></el-input>
                        </el-form-item>
                        <br>

                        <el-form-item>
                            <el-button style="position: relative;top: -46px;width: 100px;margin-left: 20px" type="primary" @click="add('Carousel')"> 确 定 </el-button>
                        </el-form-item>
                    </el-form>

                </div>

            </el-main>


        </el-container>
    </div>
</template>

<script>
export default {
    inject: ['reload'],
    data(){
        return{
            Carousel:{//表单
                imgAddress:null,
                imgTitle:null,
                imgType:null,
                startDate:null,
                expireDate:null,
                display:2,
                serialNumber:null,
                carouselId:null,
                describe:null,
                position:null,
                remarks:null
            },
            dialogVisible: false,
            dialogImageUrl: '',
            //表单必填配置
            config: {
                imgTitle: [{
                    required: true,
                    message: '名称不能为空',
                    trigger: 'blur'
                }],
                startDate: [{
                    required: true,
                    message: '开始时间不能为空',
                    trigger: 'blur'
                }],
                expireDate: [{
                    required: true,
                    message: '到期时间不能为空',
                    trigger: 'blur'
                }],
                position: [{
                    required: true,
                    message: '位置不能为空',
                    trigger: 'blur'
                }]
            },
        }
    },
    methods: {
        //刷新按钮
        Refresh(){
            this.reload()
        },
        //返回按钮
        back(){
            this.$router.back()
        },
        //添加
        add(Carousel){

            this.$refs[Carousel].validate((valid) => {
                if (valid) {

                    this.$http.get("/Carousel/addCarousel",{params:this.Carousel}).then(res => {
                        if (res.data.status == 200) {
                            this.$refs.upload.submit();
                            this.$message(res.data.msg);
                            this.reload()
                        }else{
                            this.$message(res.data.msg);
                            this.reload()
                        }
                    })

                }else {
                    this.$message ( {
                        duration:1000,
                        type: "info" ,
                        message:"请填写必填项!"
                    });
                }
            })
        },
        beforeA(file){
            //设置文件格式
            //const isPDF = file.type === 'application/jpg';
            //设置文件大小限制
            const isLt10M = file.size / 1024 / 1024 < 10;
            /*if (!isPDF) {
                this.$message.error('上传的文件只能是 PDF 格式!');
                return false;
            }*/
            if (!isLt10M) {
                this.$message.error('上传的文件大小不能超过 10MB!');
            }
            return true;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style scoped>
    .s-btn{
        display: inline-block;
        float: left;
    }
    .el-header{
        background-color: #F3F3F3;
        line-height: 50px;
        padding: 0px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
    }
    .el-form-item{
        display: inline-block;
        margin-left: 50px;
        margin-top: 0px;
    }
    .el-main{
        background-color: #F3F3F3;
        padding: 0px;
        line-height: 62px;
        height: 100%;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
     }
    .paging{
        background-color: #FFFFFF;
        line-height: 45px;
        height: 45px;
        padding-top: 12px;
    }
    .el-footer{
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        padding: 0px;
    }
    .f-div{
        display: inline-block;
    }
    .m-btn{
        float: right;
        margin: auto;
    }
    .h-but{
        display: inline-block;
        float: right;
        margin-right: 16px;
    }
    .el-footer{
        background-color: #F3F3F3;
        padding: 0px;
    }
</style>
